<template>
  <div>
    <div class="filter_con">
      <div class="filter_area">
        <el-input v-model="keyword" class="serach_input mr_10" placeholder="输入关键字"></el-input>
        <el-button @click="search">搜索</el-button>
      </div>
    </div>
    <ul class="icon_lists dib-box" ref="icon">
      <li class="dib" v-for="(item, i) in list" @click="getIocn(item)">
        <span :class="'icon iconfont el-sc-' + item.font_class"></span>
        <div class="name">{{ item.name }}</div>
      </li>
    </ul>
    <el-pagination @current-change="getshow" class="pages" background hide-on-single-page layout="prev, pager, next" :total="li_length" :page-size="50"></el-pagination>
  </div>
</template>

<script>
import icondata from '@/assets/icon/iconfont.json';
export default {
  data() {
    return {
      li_length: 0,
      list: [],
      icondata: {},
       keyword: ""
    };
  },
  mounted() {
    this.icondata = icondata.glyphs;
    this.li_length = this.icondata.length;
    this.getshow(1);
  },
  methods: {
    search() {
      let newList = [];
      if (this.keyword != "") {
        this.icondata.map(msg => {
          if(msg.name.toLowerCase().indexOf(this.keyword.toLowerCase()) != -1){
            newList.push(msg)
          }
        });
        this.list = newList
      }else{
        this.getshow(1);
      }
      
    },
    getIocn(item) {
      this.$emit('changeIcon', 'el-sc-' + item.font_class);
    },
    getshow(page) {
      let list = [];
      let a = (page - 1) * 50;

      for (var c = 0; c < 50; c++) {
        if (this.icondata[a + c]) {
          list.push(this.icondata[a + c]);
        }
      }
      this.list = list;
    }
  }
};
</script>

<style scoped>
.code-name {
  display: none;
}
.icon_lists {
  width: 100% !important;
  overflow: hidden;
  *zoom: 1;
  height: 560px;
}

.icon_lists li {
  width: 80px;
  margin-bottom: 10px;
  margin-right: 10px;
  border-radius: 4px;
  text-align: center;
  list-style: none !important;
  cursor: default;
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: inherit;
  cursor: pointer;
  border: 1px solid #fff;
}

.icon_lists li:hover {
  border: 1px solid #2d8cf0;
  background-color: rgba(232, 244, 255, 1);
}

.icon_lists .icon {
  display: block;
  height: 40px;
  line-height: 40px;
  font-size: 24px;
  margin: 10px auto;
  color: #333;
  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
  -moz-transition: font-size 0.25s linear, width 0.25s linear;
  transition: font-size 0.25s linear, width 0.25s linear;
}

/*  .icon_lists .icon:hover {
    font-size: 100px;
  }
 */
.icon_lists .svg-icon {
  /* é€šè¿‡è®¾ç½® font-size æ¥æ”¹å˜å›¾æ ‡å¤§å° */
  width: 1em;
  /* å›¾æ ‡å’Œæ–‡å­—ç›¸é‚»æ—¶ï¼Œåž‚ç›´å¯¹é½ */
  vertical-align: -0.15em;
  /* é€šè¿‡è®¾ç½® color æ¥æ”¹å˜ SVG çš„é¢œè‰²/fill */
  fill: currentColor;
  /* path å’Œ stroke æº¢å‡º viewBox éƒ¨åˆ†åœ¨ IE ä¸‹ä¼šæ˜¾ç¤º
        normalize.css ä¸­ä¹ŸåŒ…å«è¿™è¡Œ */
  overflow: hidden;
}

.icon_lists li .name {
  color: #666;
  line-height: 2;
}
</style>
